<template>
  <div>
    <el-carousel :interval="4000" arrow="hover" height="500px" loop style="width: 1200px;margin: 0 auto">
      <el-carousel-item v-for="item in items" :key="item">
        <el-image :src="item.url" style="width: 100%;height: 100%"></el-image>
      </el-carousel-item>
    </el-carousel>
  </div>
  <div v-for="item in arr" :key="item.id">
      {{item.name}}
  </div>

  <el-table :data="arr" @selection-change="selectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="name">
      </el-table-column>
  </el-table>
  <el-button @click="up">上移</el-button>
</template>

<script setup>
import {ref} from "vue";

const items=[{url:'/images/1.jpg'},{url:'/images/2.jpg'},{url:'/images/3.jpg'}]

const arr=ref([
  {id:1,name:'a'},
  {id:2,name:'b'},
  {id:3,name:'c'},
])
let curSelected=[]

const up=()=>{
  if(!curSelected||curSelected.length===0)return
  if(curSelected.length>1){
    alert("不允许操作多行")
    return;
  }

  let index=arr.value.indexOf(curSelected[0])
  arr.value.splice(index,1)
  if(index===0){
    arr.value.push(curSelected[0])
  }else{
    arr.value.splice(index-1,0,curSelected[0])
  }

}

const selectionChange=(selection)=>{
  curSelected=selection
}
</script>

<script>
export default {
  name:"Home"
}


</script>

<style scoped>

</style>